import Add from '../componets/soons/add.js';
import Delete from '../componets/soons/del.js';
let { $, table, layer, form } = layui;
export default class Soons {
  constructor() {
    this.render();
    this.handle();
  }
  render() {
    let template = `
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <style>
            .select{
                width: 100px;
              }
            </style>
        </head>
        <body>
        <!-- 表格 -->
        <table id="soonsTable" lay-filter="soonsTable"></table>
        <!-- 工具栏模板 -->
        <script type="text/html" id="tools">
          <form class="layui-form" lay-filter="searchForm" action="#">
          <div class="layui-input-inline">
            <button type="button" class="layui-btn" lay-event="add">新增电影</button>
          </div>
          <div class="layui-input-inline select" >
            <select name="type" id="select" lay-verify="" lay-filter="soonsSelect">
              <option value="name" selected>电影名</option>
              <option value="type">电影类型</option>
              <option value="area">上映区域</option>
              <option value="year">年代</option>

            </select>
          </div>
          <div class="layui-input-inline">
            <input type="text" name="value"  id="searchValue" required lay-verify="required" placeholder="根据电影名查询" autocomplete="off"
              class="layui-input">
          </div>
          <div class="layui-input-inline">
          <button type="button" class="layui-btn layui-icon layui-icon-search" lay-event="search"></button>
          </div>
        </form>
        </script>
        <script type="text/html" id="operation">
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" >删除</a>
        </script>
        <script type="text/html" id="addSoonsTemplate"></script>
        <script type="text/html" id="updateSoonsTemplate"></script>
        </body>
        </html>
        `;
    $("#content").html(template);
  }
  handle() {
    table.render({
      elem: '#soonsTable',
      url: '/soons/',
      method: "get",
      page: true,
      limit: 5,
      limits: [5, 10, 15, 20],
      request: {
        pageName: 'current',
        limitName: 'pageSize'
      },
      parseData: function (res) {
        return {
          code: 0,
          count: res.data.total,
          data: res.data.rows
        }
      },
      toolbar: "#tools",
      cols: [[ //表头
        {
          field: 'name', title: '电影名', templet(d) {
            return d.films ? d.films.name : "";
          }
        },
        {
          field: 'ename', title: '电影英文名', templet(d) {
            return d.films ? d.films.ename : "";
          }
        },
        {
          field: 'type', title: '电影类型', templet(d) {
            return d.films ? d.films.type : "";
          }
        },
        {
          field: 'area', title: '上映区域', templet(d) {
            return d.films ? d.films.area : "";
          }
        },
        {
          field: 'score', title: '评分', templet(d) {
            return d.films ? d.films.score : "";
          }
        },
        {
          field: 'actor', title: '演员', templet(d) {
            let str = '';
            // console.log(d);
            if (d.films) {
              for (let i = 0; i < d.films.actor.length; i++) {
                str += d.films.actor ? d.films.actor[i].name + '/' : "";
              }
            }
            return str;
          }
        },
        {
          field: 'year', title: '年代', templet(d) {
            return d.films ? d.films.year : "";
          }
        },
        {
          field: 'time', title: '时长', templet(d) {
            return d.films ? d.films.time : "";
          }
        },
        {
          field: 'upDate', title: '上映时间', templet(d) {
            return d.films ? d.films.upDate : "";
          }
        },
        {
          field: 'count', title: '票房', templet(d) {
            return d.films ? d.films.count : "";
          }
        },
        // {
        //   field: 'images', title: '图片', templet(d) {
        //     let str = '';
        //     // console.log(d);
        //     if (d.films) {
        //       for (let i = 0; i < d.films.images.length; i++) {
        //         str += d.films.actor ? d.films.images[i].name + '/' : "";
        //       }
        //     }
        //     return str;
        //   }
        // },
        { title: '操作', templet: '#operation' }
      ]]
    });
    table.on("tool(soonsTable)", function (obj) {
      let data = obj.data; //获得当前行数据
      let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      if (layEvent === 'del') { //删除
        new Delete(data);
      }
    })
    table.on("toolbar(soonsTable)", function (obj) {
      switch (obj.event) {
        //增加
        case 'add':
          new Add();
          break;
        //搜索
        case 'search':
          table.reload("soonsTable", {
            where: {
              type: $("#select").val(),
              value: $("#searchValue").val()
            }
          });
          break;
      }
    });
    form.on("select(soonsSelect)", function (obj) {
      // console.log($('option:selected').text());
      $("[name='value']").attr("placeholder", `根据${$('option:selected').html()}查询`);
    });
  }
}